import React, { useState, useEffect } from 'react';
import styles from './Selected.module.css';
import axios from 'axios';

// ------------------------- 本地图片资源引入 -------------------------
// 高考必胜模板系列图片（3页）
import gaokao from '../../../../public/Selected_templates/高考必胜/1.jpg';
import gaokao2 from '../../../../public/Selected_templates/高考必胜/2.jpg';
import gaokao3 from '../../../../public/Selected_templates/高考必胜/3.jpg';

// QQ易企秀模板系列图片（3页）
import QQ from '../../../../public/Selected_templates/QQ易企秀/1.jpg';
import QQ2 from '../../../../public/Selected_templates/QQ易企秀/2.jpg';
import QQ3 from '../../../../public/Selected_templates/QQ易企秀/3.jpg';

// 旗开得胜模板系列图片（3页）
import qikaide from '../../../../public/Selected_templates/旗开得胜/1.jpg';
import qikaide2 from '../../../../public/Selected_templates/旗开得胜/2.jpg';
import qikaide3 from '../../../../public/Selected_templates/旗开得胜/3.jpg';

// 芒种模板（单页）
import mangong from '../../../../public/Selected_templates/芒种/1.jpg';

// 毕业晚会模板系列图片（3页）
import biye from '../../../../public/Selected_templates/毕业晚会/1.jpg';
import biye2 from '../../../../public/Selected_templates/毕业晚会/2.jpg';
import biye3 from '../../../../public/Selected_templates/毕业晚会/3.jpg';

// 邀请函模板系列图片（3页）
import yinqing from '../../../../public/Selected_templates/邀请函/1.jpg';
import yinqing2 from '../../../../public/Selected_templates/邀请函/2.jpg';
import yinqing3 from '../../../../public/Selected_templates/邀请函/3.jpg';

// 芒种2模板（单页）
import mz from '../../../../public/Selected_templates/芒种/2.jpg';

// 鲤跃龙门
import liyu from '../../../../public/Selected_templates/鲤跃龙门/1.jpg';
import liyu2 from '../../../../public/Selected_templates/鲤跃龙门/2.jpg';

/**
 * 图片URL处理工具函数
 * 功能：标准化图片路径格式，处理相对路径、CSS样式中的url()格式及特殊字符
 * @param url 原始图片路径（可能为相对路径或含转义字符）
 * @returns 标准化后的可访问URL
 */
const processImageUrl = (url: string): string => {
    // 若为http/https开头的绝对路径，直接返回
    if (url.startsWith('http')) return url;

    // 解析CSS样式中url()包裹的路径（如url("./image.jpg")）
    const match = url.match(/url\(['"]?(.*?)['"]?\)/);
    if (match && match[1]) {
        return match[1]
            .replace(/&quot;?/g, '')    // 移除引号（处理HTML实体）
            .replace(/\\/g, '')         // 移除反斜杠（处理转义符）
            .replace(/\|/g, '%7C');     // 转义竖线字符（URL安全处理）
    }

    // 处理普通相对路径中的特殊字符
    return url
        .replace(/&quot;?/g, '')
        .replace(/\\/g, '')
        .replace(/\|/g, '%7C');
};


/**
 * 模板选择组件（Selected Component）
 * 功能：展示H5和海报模板卡片，实现鼠标交互切换图片、显示详情等效果
 * 组件结构：
 * 1. 状态管理（鼠标位置、模板数据、悬停状态）
 * 2. 数据获取（API请求模板列表）
 * 3. 交互逻辑（鼠标移动/离开事件处理）
 * 4. 视图渲染（模板卡片UI）
 */
function Selected() {
    // ------------------------- 状态管理 -------------------------
    // 存储每个卡片的鼠标位置（键为卡片索引，值为鼠标在卡片中的百分比位置）
    const [mousePositions, setMousePositions] = useState<{ [key: number]: number }>({});
    // 存储从API获取的模板数据（包含图片、类型等信息）
    const [templates, setTemplates] = useState<any[]>([]);
    // 存储每个卡片的悬停状态（键为卡片索引，值为布尔值）
    const [hovered, setHovered] = useState<{ [key: number]: boolean }>({});


    // ------------------------- 数据获取 -------------------------
    /**
     * 组件挂载时执行的副作用函数
     * 功能：从API获取模板数据并格式化图片URL
     */
    useEffect(() => {
        const fetchTemplates = async () => {
            try {
                // 发送GET请求获取模板数据（假设API地址为本地3000端口）
                const res = await axios.get('http://localhost:3000/api/images?group=img1');
                console.log('模板数据请求成功', res);

                // 格式化数据：对每个模板的img字段进行URL处理
                const formattedData = res.data.map((item: any) => ({
                    ...item,
                    img: processImageUrl(item.img)  // 调用工具函数处理图片路径
                }));

                // 更新模板数据状态
                setTemplates(formattedData);
            } catch (error) {
                console.error('模板数据请求失败', error);
            }
        };

        fetchTemplates();
    }, []); // 依赖项为空，仅在组件挂载时执行一次


    // ------------------------- 交互事件处理 -------------------------
    /**
     * 鼠标在卡片上移动时的事件处理函数
     * 功能：计算鼠标在卡片中的相对位置，更新状态以触发图片切换
     * @param e 鼠标事件对象（包含鼠标位置信息）
     * @param index 卡片索引（标识当前交互的卡片）
     */
    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
        const card = e.currentTarget;         // 获取当前交互的卡片DOM元素
        const rect = card.getBoundingClientRect(); // 获取卡片在视口中的位置和尺寸

        // 计算鼠标相对于卡片左侧的位置（像素值）
        const mouseX = e.clientX - rect.left;
        const cardWidth = rect.width;

        // 将像素位置转换为百分比（0-100），用于后续图片切换逻辑
        const positionPercent = (mouseX / cardWidth) * 100;

        // 更新对应卡片的鼠标位置状态
        setMousePositions(prev => ({
            ...prev,
            [index]: positionPercent
        }));
    };

    /**
     * 鼠标离开卡片时的事件处理函数
     * 功能：重置卡片的鼠标位置为0（初始状态）
     * @param index 卡片索引
     */
    const handleMouseLeave = (index: number) => {
        setMousePositions(prev => ({
            ...prev,
            [index]: 0  // 鼠标离开后，位置重置为0（显示第一页图片）
        }));
    };


    // ------------------------- 业务逻辑计算 -------------------------
    /**
     * 根据鼠标位置计算卡片的翻页信息
     * 功能：确定当前显示的页码和总页数（仅H5模板有翻页逻辑）
     * @param index 卡片索引
     * @returns 当前页码和总页数对象
     */
    const getPageInfoForIndex = (index: number): { currentPage: number, totalPage: number } => {
        const position = mousePositions[index] || 0; // 获取当前卡片的鼠标位置（默认为0）
        let currentPage = 1;
        let totalPage = 1;

        // 对特定索引的卡片（H5模板）设置3页翻页逻辑
        if ([0, 1, 2, 4, 5].includes(index)) {
            totalPage = 3; // H5模板总页数为3页

            // 根据鼠标位置百分比确定当前页码：
            // - 0-33%：第1页
            // - 33-66%：第2页
            // - 66-100%：第3页
            if (position < 33) currentPage = 1;
            else if (position < 66) currentPage = 2;
            else currentPage = 3;
        }

        return { currentPage, totalPage };
    };

    /**
     * 根据鼠标位置和卡片类型获取对应的图片资源
     * 功能：实现H5模板的多页图片动态切换效果
     * @param index 卡片索引
     * @returns 应显示的图片URL
     */
    const getImageForPosition = (index: number): string => {
        const position = mousePositions[index] || 0; // 获取鼠标位置（无数据时为0）

        // 根据卡片索引（模板类型）和鼠标位置返回对应的图片：
        switch (index) {
            case 0: // 高考必胜模板（H5，3页）
                return position < 33 ? gaokao : position < 66 ? gaokao2 : gaokao3;
            case 1: // QQ易企秀模板（H5，3页）
                return position < 33 ? QQ : position < 66 ? QQ2 : QQ3;
            case 2: // 旗开得胜模板（H5，3页）
                return position < 33 ? qikaide : position < 66 ? qikaide2 : qikaide3;
            case 3: // 芒种模板（海报，单页）
                return mangong;
            case 4: // 毕业晚会模板（H5，3页）
                return position < 33 ? biye : position < 66 ? biye2 : biye3;
            case 5: // 邀请函模板（H5，3页）
                return position < 33 ? yinqing : position < 66 ? yinqing2 : yinqing3;
            case 6: // 芒种2模板（海报，单页）
                return mz;
            case 7: // 芒种2模板（海报，单页）
                return position < 33 ? liyu : liyu2;
            default:
                // 其他情况（如API返回的模板）返回原始图片URL
                return templates[index]?.img || '';
        }
    };


    // ------------------------- 视图渲染 -------------------------
    return (
        <div className={styles.container}>
            {/* 遍历模板数据，生成卡片组件 */}
            {templates.map((tpl, idx) => {
                const { currentPage, totalPage } = getPageInfoForIndex(idx); // 获取翻页信息

                return (
                    <div
                        className={styles.card}
                        key={idx}
                        onMouseMove={(e) => handleMouseMove(e, idx)}       // 鼠标移动时计算位置
                        onMouseEnter={() => setHovered(prev => ({ ...prev, [idx]: true }))} // 鼠标进入时标记为悬停
                        onMouseLeave={() => {
                            setHovered(prev => ({ ...prev, [idx]: false })); // 鼠标离开时取消悬停
                            handleMouseLeave(idx);                           // 重置鼠标位置
                        }}
                    >
                        {/* 模板图片展示：根据鼠标位置动态切换图片 */}
                        <img
                            src={getImageForPosition(idx)}
                            className={styles.img}
                            alt={`模板 ${idx + 1}`}
                            style={{
                                // 仅对鲤跃龙门模板（假设索引7、8）生效
                                ...(idx === 7 || idx === 8 ? {
                                    transition: 'transform 0.6s ease-in-out',  // 延长过渡时间至0.6秒
                                    transform: hovered[idx] ? 'translateY(-15px)' : 'translateY(0)'  // 上移15px适应长图
                                } : {})
                            }}
                        />

                        {/* 卡片标签和类型 */}
                        <div className={styles.tag}>NEW</div>         {/* 新模板标签 */}
                        <div className={styles.type}>{tpl.type}</div> {/* 模板类型（H5/海报） */}

                        {/* 悬停时显示的详情内容（包含顶部操作栏和底部信息栏） */}
                        <div className={styles.hoverContent}>
                            <div className={styles.topBar}>
                                <div className={styles.icons}>
                                    <span className={styles.star}>★</span> {/* 收藏图标 */}
                                    <span className={styles.more}>⋮</span> {/* 更多操作图标 */}
                                </div>
                            </div>
                            <div className={styles.bottomBar}>
                                <div className={styles.title}>高端红色高考加油助威高考祝...</div> {/* 模板标题（省略号表示截断） */}
                                <div className={styles.info}>
                                    <img className={styles.avatar} src={biye} alt="头像" /> {/* 作者头像（示例图片） */}
                                    <span className={styles.username}>金刚侠</span>       {/* 作者名称 */}
                                    <span className={styles.views}>
                                        <svg className={styles.eyeIcon} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                            <circle cx="12" cy="12" r="3"></circle>
                                        </svg>
                                        19 {/* 浏览量 */}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* 仅当卡片悬停且为H5类型时显示翻页进度条 */}
                        {hovered[idx] && tpl.type === 'H5' && (
                            <div className={styles.pageBar}>
                                <div className={styles.pageInfo}>{currentPage}/{totalPage}</div> {/* 页码信息（当前页/总页数） */}
                                <div className={styles.progressBar}>
                                    <div
                                        className={styles.progress}
                                        style={{ width: `${(currentPage / totalPage) * 100}%` }}
                                    ></div> {/* 进度条（宽度根据当前页码计算） */}
                                </div>
                            </div>
                        )}
                    </div>
                );
            })}
        </div>
    );
}

export default Selected;